<template>
    <div class="vehicle-detail">
        <nav-header>
            <template slot="menuBefore">
				<li><router-link to="/affairs/vehicle/vehicle-list" tag="a">车辆管理</router-link></li>
				<li class="gap">&gt;</li>
			</template>
            <li>车辆详情</li>
        </nav-header>

        <div class="vehicle-detail-tab">
            <div>
                <span :class="activePanel === 'info' ? 'tab-active' : ''" @click="changeTab('info')">车辆信息</span>
                <span :class="activePanel === 'usage' ? 'tab-active' : ''" @click="changeTab('usage')">使用记录</span>
                <span :class="activePanel === 'violation' ? 'tab-active' : ''" @click="changeTab('violation')">违规记录</span>
                <span :class="activePanel === 'damage' ? 'tab-active' : ''" @click="changeTab('damage')">损坏记录</span>
            </div>
            <span class="tab-active" @click="editVehicle" v-show="activePanel === 'info'">编辑</span>
        </div>

        <transition name="fade" mode="out-in" v-if="activePanel === 'info'">
            <div class="vehicle-detail-info" v-loading="loading.status" :element-loading-text="loading.txt">
                <div class="info-item">
                    <span>厂牌型号：</span>
                    <span>{{infoDetail.brand}}</span>
                </div>
                <div class="info-item">
                    <span>车牌号：</span>
                    <span>{{infoDetail.number}}</span>
                </div>
                <div class="info-item">
                    <span>排量：</span>
                    <span>{{infoDetail.output}}</span>
                </div>
                <div class="info-item">
                    <span>车身颜色：</span>
                    <span>{{infoDetail.color}}</span>
                </div>
                <div class="info-item">
                    <span>座位数：</span>
                    <span>{{infoDetail.seat}}</span>
                </div>
                <div class="info-item">
                    <span>变速箱：</span>
                    <span>{{getGearBox(infoDetail.gearbox)}}</span>
                </div>
                <div class="info-item">
                    <span>发动机车架号后6位：</span>
                    <span>{{infoDetail.box_num}}</span>
                </div>
                <div class="info-item">
                    <span>发动机登记证书后7位：</span>
                    <span>{{infoDetail.cer_num}}</span>
                </div>
                <div class="info-item">
                    <span>发动机号：</span>
                    <span>{{infoDetail.eng_num}}</span>
                </div>
                <div class="info-item">
                    <span>车辆类型：</span>
                    <span>{{infoDetail.type_name}}</span>
                </div>
                 <div class="info-item">
                    <span>注册日期：</span>
                    <span>{{infoDetail.reg_day}}</span>
                </div>
                 <div class="info-item">
                    <span>商业保险到期：</span>
                    <span>{{infoDetail.insure_deadline}}</span>
                </div>
                 <div class="info-item">
                    <span>车辆性质：</span>
                    <span>{{infoDetail.property === 1 ? '职务配车' : '公务用车'}}</span>
                </div>
                <div class="info-item">
                    <span>车辆照片：</span>
                    <span class="info-item-img">
                        <img v-for="(item, inx) in infoDetail.image" :key="inx" :src="BASE_URL + item">
                    </span>
                </div>
                <div class="info-item">
                    <span>备注：</span>
                    <span>{{infoDetail.comment}}</span>
                </div>
            </div>
        </transition>

        <transition name="fade" mode="out-in" v-if="activePanel === 'usage'">
            <zh-usage-record />
        </transition>

        <transition name="fade" mode="out-in" v-if="activePanel === 'violation'">
            <zh-violation-record />
        </transition>

        <transition name="fade" mode="out-in" v-if="activePanel === 'damage'">
            <zh-damage-record />
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activePanel: 'info', // 当前标签名字
            infoDetail: {}, // 车辆详情
            loading: {
                status: false, // 是否显示 loading
                txt: '获取数据...' // loading 标题
            },
        }
    },
    created() {
        this.getList();
    },
    computed: {
        getGearBox() {
            return (id) => {
                return ['', '手动', '自动', '手自一体'][id]
            }
        }
    },
    methods: {
        /**
         * 获取车辆信息
         */
        getList() {
            this.loading.status = true;

            let success = (res=>{
                this.loading.status = false;
                this.infoDetail = res.data;
            })
            let params = {
                id: this.$route.params.id,
                with_image: 1
            }

            this.$ajax.get('api/car/single', {params, func:{success: success}})
        },
        /**
         * 切换标签页
         * @param {String} name 标签名称
         */
        changeTab(name) {
            this.activePanel = name;

            if (name === 'info') {
                this.getList();
            }
        },
        /**
         * 编辑车辆
         */
        editVehicle() {
            this.$router.push('/affairs/vehicle/edit-vehicle/' + this.$route.params.id);
        }
    },
}
</script>

<style lang="scss">
.vehicle-detail {
    .vehicle-detail-tab {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        span {
            display: inline-block;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid #ddd;
        }

        >span {
            padding: 6px 26px;
            border-radius: 2px;
        }

        >div {
            font-size: 0;

            span {
                padding: 8px 22px;
            }

            span:first-child {
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
            }

            span:last-child {
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            }

            span:not(:first-child) {
                border-left: 1px solid transparent;
            }
        }

        .tab-active {
            color: #fff;
            background: #348EFC;
            border: 1px solid #348EFC;
        }
    }

    .vehicle-detail-info {
        .info-item {
            display: flex;
            margin-bottom: 20px;

            >span:first-child {
                width: 155px;
                color: #666;
            }

            >span:last-child {
                flex: 1;
                width: 0;
            }
        }

        .info-item-img {
            display: flex;
            flex-wrap: wrap;
            max-width: 840px;

            img {
                margin-right: 10px;
                margin-bottom: 10px;
                width: 200px;
                height: 200px;
                object-fit: contain;
            }
        }
    }
}
</style>